<template>
  <div class="databigscreen-container">
    <!-- 大屏内容 -->
    <div class="bg">
      <!-- 顶部 -->
      <div class="header">
        <span class="header-title">IOT设备中台</span>
      </div>
      <el-popover ref="popoverRef" trigger="click" title="With title" virtual-triggering persistent>
        <span> Some content </span>
      </el-popover>
      <div class="content-box">
        <div class="left-box">
          <div class="l-b1">
            <div class="l-b1-statistic">
              <div class="l-b1-top">
                <div class="l-b1-item">
                  <div>品类数量</div>
                  <div>{{ statsData.categoryTotal }}</div>
                </div>
                <div class="l-b1-item">
                  <div>产品数量</div>
                  <div>{{ statsData.productTotal }}</div>
                </div>
              </div>
              <div class="l-b1-bottom">
                <div class="l-b1-item">
                  <div>设备数量</div>
                  <div>{{ statsData.deviceTotal }}</div>
                </div>
                <div class="l-b1-item">
                  <div>物模型消息</div>
                  <div>{{ statsData.reportTotal }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="l-b2">
            <div class="l-b2-chart-pie" ref="lb2ChartPie" style="width: 100%;height: 100%;"></div>
          </div>
          <div class="l-b3">
            <div class="l-b3-chart-line" ref="lb3ChartLine" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
        <div class="center-box">
          <div class="c-b1" style="position: relative;">
            <audio id="myAudio" controls loop style="display: none;">
              <source src="@/assets/big_screen_img/alert.mp3" />
            </audio>
            <el-radio-group
              style="position: absolute; top: 5px; right: 5px;z-index: 99;"
              v-model="mapStyleRadio"
              size="small"
              @change="mapStyleRadioChange"
            >
              <el-radio-button label="经典" value="经典" />
              <el-radio-button label="深蓝" value="深蓝" />
              <el-radio-button label="马卡龙" value="马卡龙" />
            </el-radio-group>
            <div id="container"></div>
          </div>
          <div class="c-b2">
            <div class="c-b2-chart-line" ref="cb2ChartLine" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
        <div class="right-box">
          <div class="r-b1">
            <div class="r-b1-item">
              <div class="r-b1-item-top">
                <img src="@/assets/big_screen_img/alert1.png" />
              </div>
              <div class="r-b1-item-bottom">
                <div class="box1">
                  <span>今日报警</span>
                  <span>5</span>
                </div>
                <div class="box1">
                  <span>已处理</span>
                  <span>87</span>
                </div>
              </div>
            </div>
            <div class="r-b1-item">
              <div class="r-b1-item-top">
                <img src="@/assets/big_screen_img/alert1.png" />
              </div>
              <div class="r-b1-item-bottom">
                <div class="box1">
                  <span>今日报警</span>
                  <span>5</span>
                </div>
                <div class="box1">
                  <span>已处理</span>
                  <span>87</span>
                </div>
              </div>
            </div>
          </div>
          <div class="r-b2">
            <div class="alert-box">
              <div class="alert-title">未处理告警</div>
              <ul>
                <li v-for="(v, i) in unhandleAlertList" :key="i" @click="unhandleAlertFunc(v)">{{ v[0].locate || v[0].name }}</li>
                <li v-if="unhandleAlertList.length == 0">暂无数据</li>
              </ul>
            </div>
            <div class="alert-box">
              <div class="alert-title">已处理告警</div>
              <ul>
                <li v-for="(v, i) in handledAlertList" :key="i" @click="handledAlertFunc(v)">
                  {{ v.locate || v.name }}
                </li>
                <li v-if="handledAlertList.length == 0">暂无数据</li>
              </ul>
            </div>
          </div>
          <div class="r-b3">
            <div class="r-b3-chart-pie" ref="rb3ChartPie" style="width: 100%;height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航按钮 -->
    <el-button style="position: fixed;top: 10px;right: 130px;" type="primary" @click="goToBackend" class="enter-backend-btn">
      进入后台管理系统
    </el-button>
    <el-button style="position: fixed;top: 10px;right: 10px;" type="primary" @click="enableFullScreen" class="enter-backend-btn"> 全屏 </el-button>
  </div>
</template>

<script setup>
//import '@/assets/js/amap'
import AMapLoader from '@amap/amap-jsapi-loader'
import { ref, unref, onMounted, h, render } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { stats } from '@/api/index'
import { getMsgList } from '@/views/iot/alarm/api/alarm.api'
import poiImg from '@/assets/big_screen_img/poi-marker-red.png'
import { ClickOutside as vClickOutside } from 'element-plus'
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import ClipboardJS from 'clipboard'

let AMap = null
let map = null

AMapLoader.load({
  key: '3510ef6dfe31a7fa08861e9c290b3b2c', // 申请好的Web端开发者Key，首次调用 load 时必填
  //version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  plugins: ['AMap.MoveAnimation', 'AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then(res => {
  console.log('加载Amap')
  AMap = res
  map = new AMap.Map('container', {
    resizeEnable: true,
    center: [108.5525, 34.3227],
    zoom: 4.8,
    mapStyle: 'amap://styles/blue'
  })
  setTimeout(() => {
    handleMap()
  }, 500)
})

const mapStyleRadio = ref('深蓝')

const lb2ChartPie = ref(null)
let myLb2ChartPie = null

const lb3ChartLine = ref(null)
let myLb3ChartLine = null

const cb2ChartLine = ref(null)
let myCb2ChartLine = null

const rb3ChartPie = ref(null)
let myRb3ChartPie = null

// 首页统计数据
const statsData = ref({
  categoryTotal: 0,
  productTotal: 0,
  deviceTotal: 0,
  reportTotal: 0,
  onlineTotal: 0,
  offlineTotal: 0,
  neverOnlineTotal: 0,
  deviceStatsOfCategory: [],
  reportDataStats: [],
  deviceUpMessageStats: [],
  deviceDownMessageStats: []
})

const router = useRouter()

const goToBackend = () => {
  router.push('/index')
}

const isHistoryClick = ref(false)

onMounted(() => {
  //初始化 ECharts 引入echarts
  myLb2ChartPie = echarts.init(lb2ChartPie.value)
  myLb3ChartLine = echarts.init(lb3ChartLine.value)
  myRb3ChartPie = echarts.init(rb3ChartPie.value)
  myCb2ChartLine = echarts.init(cb2ChartLine.value)

  const optionLb3ChartLine = {
    textStyle: {
      color: '#fff' // 所有文字默认白色
    },
    title: {
      text: '设备综合功率曲线',
      textStyle: {
        color: '#fff' // 图例文字颜色
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['实时功率'],
      textStyle: {
        color: '#fff' // 图例文字颜色
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2025-01', '2025-02', '2025-03', '2025-04', '2025-05', '2025-06']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '综合功率',
        type: 'line',
        symbolSize: 0,
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210],
        lineStyle: {
          color: '#3dffff'  // 设置线条颜色为红色
        }
      }
    ]
  }
  optionLb3ChartLine && myLb3ChartLine.setOption(optionLb3ChartLine)

  handleAllChart()
})

const alertList = ref([])
const handledAlertList = ref([])
const unhandleAlertList = ref([])
const uniMarker = ref()

const lastUniMarker = ref()

const animateToNewLocation = (lng, lat, zoom, duration) => {
  map.setZoom(4.8)
  map.setCenter([108.5525, 34.3227])
  //回到全国
  animateToNewLocationStep(lng, lat, zoom, duration)
}

// 设置新中心点和缩放级别
const animateToNewLocationStep = (lng, lat, zoom, duration) => {
  // 获取当前地图视图状态
  const currentCenter = map.getCenter()
  const currentZoom = map.getZoom()

  // 计算动画需要的步数和间隔
  const steps = 60 // 动画帧数
  const interval = duration / steps

  // 计算每步的变化量
  const lngStep = (lng - currentCenter.lng) / steps
  const latStep = (lat - currentCenter.lat) / steps
  const zoomStep = (zoom - currentZoom) / steps
  const fixedPixelDistance = 180 // 距离底部100像素
  let currentStep = 0

  const animate = () => {
    if (currentStep >= steps) {
      // 确保最终位置准确
      map.setCenter([lng, lat])
      map.setZoom(zoom)
      return
    }

    // 计算新的位置和缩放级别
    const center = map.getCenter()
    const zoom = map.getZoom()
    const newLng = center.lng + (23 / zoom)
    const newLat = lat + (13 / zoom)

    // 获取地图容器高度
    const containerHeight = document.getElementById('container').offsetHeight

    // 计算当前zoom下1像素对应的经纬度
    const pixelToLngLat = 360/Math.pow(2, map.getZoom()+8)

    // 计算需要偏移的经纬度
    const offsetY = (containerHeight/2 - fixedPixelDistance) * pixelToLngLat

    const newZoom = currentZoom + (zoomStep * currentStep)

    // 更新地图视图
    map.setCenter([lng, lat + offsetY])
    map.setZoom(newZoom)
    currentStep++
    setTimeout(animate, interval)
  }

  animate()
}

let groupAlerts = (alerts) => {
    // 1. 按imei分组
    const imeiMap = new Map()

    alerts.forEach(alert => {
        if (!imeiMap.has(alert.devie_name)) {
            imeiMap.set(alert.devie_name, [])
        }
        imeiMap.get(alert.devie_name).push(alert)
    })

    // 2. 处理每个imei组
    const result = []
    imeiMap.forEach((alerts, imei) => {
        // 按时间排序
        alerts.sort((a, b) => a.alertTime - b.alertTime)

        let currentGroup = {
            imei: imei,
            ids: [],
            lastTime: 0
        }

        alerts.forEach((alert, index) => {
            if (index === 0 ||
                alert.alertTime - currentGroup.lastTime > 5000) {
                // 新分组
                if (currentGroup.ids.length > 0) {
                    result.push({
                        imei: currentGroup.imei,
                        ids: currentGroup.ids
                    })
                }
                currentGroup = {
                    imei: imei,
                    ids: [alert],
                    lastTime: alert.alertTime
                }
            } else {
                // 加入当前分组
                currentGroup.ids.push(alert)
                currentGroup.lastTime = alert.alertTime
            }
        })

        // 添加最后一个分组
        if (currentGroup.ids.length > 0) {
            result.push({
                imei: currentGroup.imei,
                ids: currentGroup.ids
            })
        }
    })

    return result
}

let handleMap = () => {
  getMsgList().then(res => {
    let originList = res.data.rows
    let filterList = []
    for (const v of originList) {
      // 过滤掉已处理的和信息不完整的
      if (v.process == '0' || v.locate == '' || v.longitude == '' || v.latitude == '' || v.longitude == null || v.latitude == null) {
        continue
      }
      filterList.push(v)
    }
    let groupList = groupAlerts(filterList)
    handledAlertList.value = []
    unhandleAlertList.value = []
    for (const v of originList) {
      if(v.process == 0) {
        handledAlertList.value.push(v)
      }
    }
    for (const v of groupList) {
      unhandleAlertList.value.push(v.ids)
    }
    alertList.value = unhandleAlertList.value
    let mapShowList = []
    if(unhandleAlertList.value.length > 0) {
      mapShowList = unhandleAlertList.value.slice(0, 1)
    }
    // 控制报警
    if(mapShowList.length > 0) {
      document.getElementById('myAudio').play()
    } else {
      document.getElementById('myAudio').pause()
    }
    for (const vv of mapShowList) {
      // imei 5秒内相同的只取第一个
      let v = vv[0]
      if (uniMarker.value == null || (lastUniMarker.value != uniMarker.value)) {
        if (uniMarker.value) {
          uniMarker.value.setMap(null)
          uniMarker.value = null
        }
        uniMarker.value = createMarker(vv)
        map.add(uniMarker.value)
        animateToNewLocation(parseFloat(v.longitude), parseFloat(v.latitude)+0.03, 13, 3000)
      }
      lastUniMarker.value = uniMarker.value
    }
    // 处理完报警后移除marker
    /*if (mapShowList.length == 0) {
      if (uniMarker.value) {
        uniMarker.value.setMap(null)
        uniMarker.value = null
        map.setZoom(4.8)
      }
    }*/
  })
}

let createMarker = (vv) => {
    let v = vv[0]
    if (vv instanceof Array) {
      v = vv[0]
    } else {
      v = vv
    }
    let marker = new AMap.Marker({
      icon: poiImg,
      position: [v.longitude, v.latitude]
    })
    marker.on('click', (e) => {
      // map.setCenter([parseFloat(v.longitude), parseFloat(v.latitude) + 0.03])
      // map.setZoom(13, 3000)
      //animateToNewLocation(parseFloat(v.longitude), parseFloat(v.latitude)+0.03, 13, 3000)
    })
    // 自定义点标记内容
    var markerContent = document.createElement('div')
    // 点标记中的图标
    var markerImg = document.createElement('img')
    let innerHtml = `
      <div>
        <img class="markerlnglat" src="${poiImg}" width="20px" height="34px"/>
        <div class="marker-info-box">
          <div style="margin:15px 0;">报警处理</div>
          <div class="marker-info-item">
            <div class="left">安装点位：</div>
            <div class="right top-show">${v.locate}</div>
          </div>
          <div class="marker-info-item">
            <div class="left">设备名称：</div>
            <div class="right top-show">
              ${v.devie_name}
              <button class="copy-device-name" id="copy-btn" data-clipboard-text="${v.devie_name}">
                <svg attr="${v.devie_name}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                  <path fill="currentColor" d="M128 320v576h576V320zm-32-64h640a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32M960 96v704a32 32 0 0 1-32 32h-96v-64h64V128H384v64h-64V96a32 32 0 0 1 32-32h576a32 32 0 0 1 32 32M256 672h320v64H256zm0-192h320v64H256z"></path>
                </svg>
              </button>
            </div>
          </div>
          <div class="marker-info-item">
            <div class="left">详情：</div>
            <div class="right">${v.details}</div>
          </div>
          <div class="marker-info-item">
            <div class="left">名称：</div>
            <div class="right top-show">${v.name}</div>
          </div>
          <div class="marker-info-item">
            <div class="left">原因：</div>
            <div class="right top-warn">报警</div>
          </div>
          <div class="marker-info-item">
            <div class="left">时间：</div>
            <div class="right">${new Date(v.alertTime).toLocaleString('zh-CN')}</div>
          </div>
          <div class="marker-btn-box">
            <div class="marker-btn" style="background-color: #919399;">测试</div>
            <div class="marker-btn" style="background-color: #3F9EFF;">误报</div>
            <div class="marker-btn" style="background-color: #67C23A;">演练</div>
            <div class="marker-btn" style="background-color: #E73904;">报警</div>
          </div>
        </div>
      </div>
    `
    markerImg.className = 'markerlnglat'
    markerImg.src = poiImg
    markerImg.setAttribute('width', '25px')
    markerImg.setAttribute('height', '34px')
    markerContent.innerHTML = innerHtml
    let boxContentEl = markerContent.children[0].children[1]
    let copyBtn = boxContentEl.children[2].children[1].children[0]
    console.log(copyBtn)

    const trigger = boxContentEl.children[2].children[1].children[0]
    // 创建ClipboardJS实例，传入触发元素和配置对象
    const clipboard = new ClipboardJS(trigger, {
      // 文本复制的目标属性是text/plain
      text: function(trigger) {
        return trigger.getAttribute('data-clipboard-text')
      }
    })

    // 添加事件监听
    clipboard.on('success', function(e) {
      // e.text是复制的文本内容
      console.log('复制成功，内容为：' + e.text)
      ElMessage({
        type: 'success',
        message: '复制成功',
      })
      // 清除选择并隐藏提示
      e.clearSelection()
    })
    copyBtn.onclick = (e) => {

    }
    markerContent.children[0].children[0].onclick = (e) => {
      if (boxContentEl.style.width == '0px') {
        boxContentEl.style.width = '550px'
        boxContentEl.style.height = '350px'
        boxContentEl.style.display = ''
      } else {
        boxContentEl.style.width = '0px'
        boxContentEl.style.height = '0px'
        boxContentEl.style.display = 'none'
      }
    }
    let alertClickHandler = (e, type) => {
      ElMessageBox.confirm(`确定将该记录设置为'${type}'?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback: (action) => {
          console.log(action)
          if (action == 'cancel') {
            return
          }
          if (vv instanceof Array) {
            request({
              url: '/alert/saveAlertRecordPage',
              method: 'post',
              data: {
                  ids: vv.map(m => m.id),
                  process: 0
              },
            }).then(res => {
              console.log(res)
              ElMessage({
                type: 'info',
                message: '修改成功',
              })
              // 刷新
              isHistoryClick.value = true
              handleMap()
            })
          }
          if (uniMarker.value) {
            uniMarker.value.setMap(null)
            uniMarker.value = null
            map.setZoom(4.8)
          }
        },
      })
    }
    // 添加按钮点击事件
    boxContentEl.children[7].children[0].onclick = (e) => {
      alertClickHandler(e, e.target.innerText)
    }
    boxContentEl.children[7].children[1].onclick = (e) => {
      alertClickHandler(e, e.target.innerText)
    }
    boxContentEl.children[7].children[2].onclick = (e) => {
      alertClickHandler(e, e.target.innerText)
    }
    boxContentEl.children[7].children[3].onclick = (e) => {
      alertClickHandler(e, e.target.innerText)
    }
    marker.setContent(markerContent) //更新点标记内容
    return marker
}

const popoverRef = ref()

let handleAllChart = () => {
  stats().then((res) => {
    statsData.value = res.data
    // 一并处理
    lb2ChartPieHandler()
    handleCb2ChartLine()
    handleRb3ChartPie()
  })
}

let lb2ChartPieHandler = () => {
  const optionPie = {
    textStyle: {
      color: '#fff' // 所有文字默认白色
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      left: 'center',
      textStyle: {
      color: '#fff' // 图例文字颜色
    }
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: statsData.value.offlineTotal, name: '离线率' },
          { value: statsData.value.onlineTotal, name: '在线率' },
          { value: statsData.value.neverOnlineTotal, name: '待激活率' }
        ],
      },
    ],
  }
  optionPie && myLb2ChartPie.setOption(optionPie)
}

let handleCb2ChartLine = () => {
  let upList = statsData.value.deviceUpMessageStats
  let downList = statsData.value.deviceDownMessageStats
  let allX = upList.map(v => v.time).concat(downList.map(v => v.time))
  allX = allX.sort((a, b) => a - b)
  let option = {
    title: {
      text: '消息量统计',
      textStyle: {
        color: '#fff' // 所有文字默认白色
      },
    },
    textStyle: {
      color: '#fff' // 所有文字默认白色
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['上行消息量', '下行消息量'],
      textStyle: {
        color: '#fff' // 所有文字默认白色
      },
    },
    grid: {
      left: '0%',
      right: '0%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: allX.map(v => {
        var date = new Date(v)
        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString().split(' ')[0]
      })
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '上行消息量',
        type: 'line',
        stack: 'Total',
        data: upList.map(v => v.data)
      },
      {
        name: '下行消息量',
        type: 'line',
        stack: 'Total',
        data: downList.map(v => v.data)
      }
    ]
  }
  option && myCb2ChartLine.setOption(option)
}

let handleRb3ChartPie = () => {
  const optionRb3ChartPie = {
    tooltip: {
      trigger: 'item'
    },
    textStyle: {
      color: '#fff' // 所有文字默认白色
    },
    legend: {
      top: '5%',
      left: 'center',
      textStyle: {
        color: '#fff' // 所有文字默认白色
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: statsData.value.deviceStatsOfCategory
      }
    ]
  }
  optionRb3ChartPie && myRb3ChartPie.setOption(optionRb3ChartPie)
}

const mapStyleRadioChange = e => {
  console.log(e)
  if(e == '经典') {
    map.setMapStyle('amap://styles/normal')
  } else if (e == '深蓝') {
    map.setMapStyle('amap://styles/blue')
  } else if (e == '马卡龙') {
    map.setMapStyle('amap://styles/macaron')
  }
}

let unhandleAlertFunc = (vv) => {
  let v = vv[0]
  if (uniMarker.value) {
    uniMarker.value.setMap(null)
    uniMarker.value = null
  }
  uniMarker.value = createMarker(vv)
  map.add(uniMarker.value)
  animateToNewLocation(parseFloat(v.longitude), parseFloat(v.latitude)+0.03, 13, 3000)
}

let handledAlertFunc = (v) => {
  if (unhandleAlertList.value.length > 0) {
    ElMessage({
      type: 'warn',
      message: '请先处理报警',
    })
    return
  }
  if (uniMarker.value) {
    uniMarker.value.setMap(null)
    uniMarker.value = null
  }
  uniMarker.value = createMarker(v)
  map.add(uniMarker.value)
  isHistoryClick.value = false
  animateToNewLocation(parseFloat(v.longitude), parseFloat(v.latitude)+0.03, 13, 3000)
}

let enableFullScreen = () => {
  if (!document.fullscreenElement) {
    // 请求全屏
    document.documentElement.requestFullscreen()
  } else {
    // 退出全屏
    document.exitFullscreen()
  }
}

// 定时任务
setInterval(() => {
  handleAllChart()
}, 1000 * 30)

setInterval(() => {
  handleMap()
}, 5000)
</script>

<style lang="scss" scoped>

.databigscreen-container {
  height: 100vh;
  background: #030409;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .bg {
    width: 100%;
    height: 100%;
    background-image: url("@/assets/big_screen_img/beijing.png");
    background-size: 100% 100%;
    .header {
      height: 6%;
      display: flex;
      justify-content: center;
      background-image: url("@/assets/big_screen_img/header1.png");
      background-size: 100% 100%;
      .header-title {
        font-size: 36px;
      }
    }
    .content-box {
      width: 100%;
      height: 94%;
      display: flex;
      .left-box {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .title {
          margin-left: 22px;
          margin-top: 2px;
        }
        .l-b1 {
          width: 90%;
          height: 15%;
          .l-b1-statistic {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            height: 100%;
            .l-b1-top {
              display: flex;
              width: 100%;
            }
            .l-b1-bottom {
              display: flex;
              width: 100%;
            }
            .l-b1-item {
              display: flex;
              width: 50%;
              text-align: center;
              justify-content: center;
              align-items: baseline;
              font-size: 20px;
              div {
                width: 50%;
                color: #3dffff;
              }
            }
          }
        }
        .l-b2 {
          width: 90%;
          height: 40%;
          // background-image: url("@/assets/big_screen_img/kuang4.png");
          // background-size: 100% 100%;
        }
        .l-b3 {
          width: 90%;
          height: 40%;
          // background-image: url("@/assets/big_screen_img/kuang4.png");
          // background-size: 100% 100%;
        }
      }
      .center-box {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .c-b1 {
          width: 100%;
          height: 65%;
          border: 1px solid #2277de;
          #container {
            width: 100%;
            height: 100%;
          }
        }
        .c-b2 {
          width: 100%;
          height: 30%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .b1, .b2 {
            width: 48%;
            height: 100%;
          }
        }
      }
      .right-box {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .r-b1 {
          width: 90%;
          height: 20%;
          display: flex;
          .r-b1-item {
            width: 50%;
            height: 100%;
            .r-b1-item-top {
              width: 100%;
              height: 70%;
              text-align: center;
              img {
                width: 120px;
              }
            }
            .r-b1-item-bottom {
              display: flex;
              width: 100%;
              height: 30%;
              .box1 {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 50%;
                height: 100%;
              }
            }
          }
        }
        .r-b2 {
          width: 90%;
          height: 40%;
          display: flex;
          .alert-box {
            flex: 1;
            width: 50%;
            height: 100%;
            .alert-title {
              width: 100%;
              height: 5%;
              text-align: center;
              color: #3dffff;
              font-weight: bolder;
              font-size: 18px;
            }
            ul {
              height: 95%;
              width: 100%;
              overflow-y: auto;
              padding: 0px;
              li {
                width: 100%;
                list-style: none;
                cursor: pointer;
                color: #3dffff;
                min-height: 40px;
                font-size: 12px;
              }
            }
          }
        }
        .r-b3 {
          width: 90%;
          height: 30%;
        }
      }
    }
  }

  h1 {
    font-size: 3rem;
    margin-bottom: 2rem;
  }

  .enter-backend-btn {
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border-radius: 8px;
  }
}
</style>

<style lang="scss">
.marker-info-box {
  position: relative;
  top: -400px;
  left: -275px;
  background-color: #fff;
  width: 550px;
  height: 350px;
  border-radius: 6px;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  background-image: url("@/assets/big_screen_img/alert1.png");
  background-size: 120px 120px;
  background-repeat: no-repeat;
  background-position: 400px 0;
  .marker-info-item {
    width: 100%;
    min-height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px;
    .left {
      width: 20%;
      text-align: right;
      color: #333;
    }
    .right {
      width: 80%;
      text-align: left;
      color: #919399;
      .copy-device-name {
        color: #333;
        vertical-align: baseline;
        background-color: transparent;
        border: none;
        svg {
          width: 25px;
          height: 15px;
          vertical-align: baseline;
          path {
            fill: #278BF3;
          }
        }
      }
    }
    .top-show {
      color: #278BF3;
    }
    .top-warn {
      color: #E73904;
    }
  }
  .marker-btn-box {
    display: flex;
    width: 100%;
    justify-content: right;
    margin-top: 15px;
  }
  .marker-btn {
    width: 60px;
    height: 35px;
    margin: 0 3px;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    background-color: #278BF3;
    line-height: 35px;
  }
}
body {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
</style>
